<template>
  <div class="tuan">
    <div class="header">
      <div class="s">
        <van-icon @click="bock" name="arrow-left" />
        <span>团购</span>
        <span></span>
      </div>
    </div>
    <div class="main">
      <div v-for="(item,index) in getList" :key="index" class="one">
        <p>
          <img :src="item.img" alt @click="toDetail(item.id)" />
        </p>
        <p>{{item.name}}</p>
        <p>{{item.dizhi}}</p>
        <p>
          活动时间:{{item.time}}-{{item.overitme}}
          <span>已报名:{{item.renshu}}人</span>
        </p>
        <p>
          <van-switch v-model="checked" />
          <span>
            <button class="btn1" @click="toDet(item.id)">开团</button>
            <button class="btn2" @click="toDel(item.id)">删除</button>
          </span>
        </p>
      </div>
    </div>
    <div class="footer"></div>
  </div>
</template>
<script>
import axios from "../../src/axios/index";
import api from "../api/index";
export default {
  name: "Gou",
  data() {
    return {
      checked: true,
      getList: []
    };
  },
  created() {
    this.toList()
  },
  methods: {
    toList() {
      axios.get("/tuangou").then(res => {
        this.getList = res.data;
      });
    },
    toDel(id) {
      axios.delete(`/tuangoudel/${id}`).then(res => {
        console.log(res);
        this.toList()
      });
    },
    toDetail(id) {
      this.$router.push(`/detail/${id}`);
    },
    toDet(id) {
      this.$router.push(`/kai/${id}`);
    },
    bock() {
      this.$router.go(-1);
    }
  }
};
</script>
<style scoped>
.tuan {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header {
  width: 100%;
  height: 50px;
  background: rgb(46, 114, 241);
}
.s {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  color: #fff;
  font-size: 18px;
}
.main {
  width: 100%;
  height: auto;
  flex: 1;
  overflow-y: scroll;
}
.one {
  width: 90%;
  height: 380px;
  margin: auto;
  margin-top: 20px;
}
.one img {
  width: 100%;
  height: 238px;
}
p {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}
.btn1 {
  width: 60px;
  height: 30px;
  border: none;
  background: #0f7ef4;
  color: #fff;
  border-radius: 5px;
}
.btn2 {
  width: 60px;
  height: 30px;
  border: none;
  background: #f2f2f2;
  color: #8e8e8e;
  border-radius: 5px;
  margin-left: 10px;
}
</style>
